<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <!--引用bootstrap的css样式 -->
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <!-- 最外层的容器 -->
        <div class="container">
            <table class="table table-bordered table-hover">
                <!-- 表格标题 -->
                <caption class="h1 text-center text-info">用户信息列表</caption>
                <tr >
                    <th class="text-center text-danger" v-for="ths in arr">{{ths}}</th>
                </tr>
                <!-- 用户信息 -->
                <tr class="text-center" v-for="(u,i) in users" :key="u.id">
                    <td>{{i+1}}</td>
                    <td>{{u.name}}</td>
                    <td>{{u.sex}}</td>
                    <td>{{u.age}}</td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm" >修改</button>
                        <button type="button" class="btn btn-danger btn-sm" @click="del(i)">删除</button>
                    </td>
                </tr>
                
                <tr v-show="users.length === 0">
                    <td colspan="5" class="text-center text-muted"><p>暂无数据...</p></td>
                </tr>
            </table>
            
            <hr >
            
            <div class="row" style="width: 500px; margin: 0 auto; border: 2px solid ghostwhite; padding: 15px;">
                <form >
                  <div class="form-group">
                    <label for="uanem">姓名：</label>
                    <input type="text" class="form-control" v-model="newUser.name" placeholder="请输入姓名">
                  </div>
                  
                  <div class="form-group">
                    <label for="sex">性别：</label>
                    <input type="text" class="form-control" v-model="newUser.sex" placeholder="请输入性别">
                  </div>
                  
                  <div class="form-group">
                    <label for="age">年龄：</label>
                    <input type="text" class="form-control"v-model.number="newUser.age" placeholder="请输入年龄">
                  </div>
                  
                  <div class="form-group">
                    <button type="button" class="btn btn-primary btn-sm"  @click="add()">添加</button>
                    <button type="button" class="btn btn-danger btn-sm" @click="newUser={}">重置</button>
                  </div>
                </form>
            </div>
            
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <script type="text/javascript">
    
            var vm = new Vue({
				el:"#app",
				data:{
					arr:["序号","姓名","性别","年龄","操作"],
					users:[
						{id:1,name:"友谊",sex:"男",age:20,},
						{id:2,name:"雷浪",sex:"男",age:20,},
						{id:3,name:"别睡太晚",sex:"男",age:20,},
					],
					newUser:{
						id:0,
						name:"",
						sex:"",
						age:''
					}
				},
				methods:{
					add(){
                        var maxId = 0;
                        //遍历
                        for (var i = 0; i < this.users.length; i++){
                            if(maxId < this.users[i].length){
                               maxId = this.users[i].id;
                            }
                        }
                        if(this.newUser.name === ''){
                            alert("请输入用户姓名")
							return;
                        }
                        this.newUser.id = maxId + 1;
                        this.users.push(this.newUser);
                        console.log(this.newUser.id)
                        this.newUser={};
					},
					del(i){
						// console.log(i)
						this.users.splice(i,1)
					}
				}
			})
    
    </script>
    
</body>
</html>